<template>
  <div class="main-container">
    <div v-loading="loading" element-loading-text="加载题目详情中...">
      
      
      <el-card class="block-card" v-if="!loading && problem.id">
        <div class="problem-header">
               <!-- 返回按钮 -->
      <div class="back-button-wrapper" @click="goBack">
        返回题目列表
        <el-button 
          type="text" 
          icon="el-icon-arrow-right" 
          class="back-button"
        >
        </el-button>
      </div>
          <h2 class="problem-title">{{ problem.title }}</h2>
          <div class="problem-meta">
            <el-tag type="info" size="mini" style="margin-right:8px;">编号：{{ problem.id }}</el-tag>
            <el-tag v-if="problem.difficulty === 1" type="success" size="mini" style="margin-right:8px;">简单</el-tag>
            <el-tag v-else-if="problem.difficulty === 2" type="warning" size="mini" style="margin-right:8px;">中等</el-tag>
            <el-tag v-else-if="problem.difficulty === 3" type="danger" size="mini" style="margin-right:8px;">困难</el-tag>
            <el-tag type="primary" size="mini" style="margin-right:8px;">时间限制：{{ problem.time_limit }}ms</el-tag>
            <el-tag type="primary" size="mini" style="margin-right:8px;">内存限制：{{ problem.memory_limit }}KB</el-tag>
            <span class="problem-stats">{{ formattedStats }}</span>
          </div>
       
        </div>
      
        <div class="problem-content">
          <div class="problem-section">
            <h3>题目描述</h3>
            <div class="problem-desc" v-html="problem.description"></div>
          </div>
          
          <div class="problem-section" v-if="problem.input_description">
            <h3>输入描述</h3>
            <div class="problem-desc" v-html="problem.input_description"></div>
          </div>
          
          <div class="problem-section" v-if="problem.output_description">
            <h3>输出描述</h3>
            <div class="problem-desc" v-html="problem.output_description"></div>
          </div>
          
          <div class="problem-section" v-if="problem.sample_input">
            <h3>样例输入</h3>
            <pre class="sample-code">{{ problem.sample_input }}</pre>
          </div>
          
          <div class="problem-section" v-if="problem.sample_output">
            <h3>样例输出</h3>
            <pre class="sample-code">{{ problem.sample_output }}</pre>
          </div>
          
          <div class="problem-section" v-if="problem.hint && problem.hint !== '无'">
            <h3>提示</h3>
            <div class="problem-desc" v-html="problem.hint"></div>
          </div>
        </div>
      </el-card>

      <el-card class="block-card" style="margin-top: 24px;" v-if="!loading && problem.id">
        <div class="submit-header">
          <h3>提交代码</h3>
        </div>
        <el-form :model="submitForm" class="submit-form" label-width="80px">
          <el-form-item label="语言">
            <el-select v-model="submitForm.lang" style="width: 180px;">
              <el-option label="C++" value="cpp" />
            </el-select>
          </el-form-item>
          <el-form-item label="代码">
            <el-input
              spellcheck="false"
              type="textarea"
              v-model="submitForm.code"
              :rows="15"
              placeholder="请在此输入你的代码"
              class="code-input"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="submitCode" :loading="submitting">提交</el-button>
            <el-button @click="resetCode">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { problemDetail } from '@/api/oj'

export default {
  name: 'ProblemDetailView',
  data() {
    return {
      problem: {
        id: '',
        title: '',
        description: '',
        input_description: '',
        output_description: '',
        sample_input: '',
        sample_output: '',
        hint: '',
        difficulty: 0,
        time_limit: 0,
        memory_limit: 0,
        submission_count: 0,
        accepted_count: 0,
        acceptance_rate: '0.00',
        user_count:0,
      },
      submitForm: {
        lang: 'cpp',
        code: ''
      },
      submitting: false,
      loading: false
    }
  },
  created() {
    this.fetchProblemDetail()
  },
  watch: {
    '$route'(to, from) {
      if (to.params.id !== from.params.id) {
        this.fetchProblemDetail()
      }
    }
  },
  computed: {
    formattedStats() {
      const submissionCount = this.problem.submission_count || 0
      const acceptedCount = this.problem.accepted_count || 0
      const acceptanceRate = this.problem.acceptance_rate || '0.00'
      const userCount =this.problem.user_count || 0
      return `通过：${acceptedCount} | 人数：${userCount} | 提交：${submissionCount} |  | 通过率：${acceptanceRate}%`
    }
  },
  methods: {
    async fetchProblemDetail() {
      const problemId = this.$route.params.id
      if (!problemId) {
        this.$message.error('题目ID不存在')
        return
      }
      
      this.loading = true
      try {
        const response = await problemDetail(problemId)
        if (response.data.code === 200) {
          this.problem = response.data.data
          // 如果存在stats对象，则合并统计数据
          if (this.problem.stats) {
            this.problem.submission_count = this.problem.stats.submission_count || 0
            this.problem.accepted_count = this.problem.stats.correct_count || 0
            this.problem.acceptance_rate = this.problem.stats.correct_rate || '0.00'
            this.problem.user_count = this.problem.stats.user_count || 0
           
          }
        } else {
          this.$message.error(response.data.message || '获取题目详情失败')
        }
      } catch (error) {
        console.error('获取题目详情失败:', error)
        this.$message.error('获取题目详情失败')
      } finally {
        this.loading = false
      }
    },
    
    submitCode() {
      if (!this.submitForm.code.trim()) {
        this.$message.warning('请输入代码');
        return;
      }
      this.submitting = true;
      // TODO: 这里需要调用提交代码的API
      setTimeout(() => {
        this.submitting = false;
        this.$message.success('代码已提交（演示）');
        this.submitForm.code = '';
      }, 1200);
    },
    
    resetCode() {
      this.submitForm.code = ''
      this.$message.info('代码已重置')
    },
    
    goBack() {
      window.history.back(); 
    }
  }
}
</script>

<style scoped>
.main-container {
  margin-top: 10px;
  box-sizing: border-box;
}
.block-card {
  margin-bottom: 24px;
}
.problem-header {
  margin-bottom: 16px;
}
.problem-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #222;
}
.problem-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: #888;
}
.problem-stats {
  margin-left: 8px;
  color: #666;
  font-size: 13px;
}
.problem-content {
  margin-top: 20px;
}
.problem-section {
  margin-bottom: 24px;
}
.problem-section h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  border-left: 4px solid #409EFF;
  padding-left: 12px;
}
.problem-desc {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  margin-top: 8px;
}
.sample-code {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 8px 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.submit-header {
  margin-bottom: 12px;
}
.submit-form {
  max-width: 1000px;
}
.code-input >>> textarea {
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  font-size: 15px;
  background: white;
  border-radius: 4px;
  min-height: 300px;
  font-family: '微软雅黑';
}
.back-button-wrapper {
  margin-bottom: 16px;
  padding: 0 24px;
  float: right;
  cursor: pointer;
}
.back-button {
  font-size: 14px;
  color: #606266;
  padding: 8px 0;
  height: auto;
  transition: color 0.3s;
}
.back-button:hover {
  color: #409EFF;
}
.back-button i {
  margin-right: 4px;
}
</style> 